<!DOCTYPE html>
<html>
<head>
<title>video</title>
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />
<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }
    body, html, #test_video {
        width: 100%;
        height: 100%;
    }
    .videoBox {
        width:480px;
        height:320px;
        overflow: hidden;
    }
    .video-js,.video-js video {
        width: 100%;
        height: 100%;
    }

</style>
</head>
<body>

<div class="videoBox">
    <video id="my_video_1" class="video-js vjs-default-skin" controls>
        <source src="http://localhost:8088/hls/test.m3u8" type="application/x-mpegURL"> 
    </video>
</div>

</body>
</html>
<script type="text/javascript" src="./videojs/video.min.js"></script>
<!-- <script type="text/javascript" src="./video-js-5.20.4/video.js"></script> -->
<!-- <script type="text/javascript" src="./videojs-7/videojs-flash.js"></script> -->
<script type="text/javascript" src="./videojs/videojs-contrib-hls.min.js"></script>
<script>
videojs.options.flash.swf = "./video-js-5.20.4/video-js.swf"
    var player = videojs('my_video_1', {"autoplay":true});
    player.play();
</script>
